<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge;IE=11;IE=9;IE=8;">
    <meta charset="UTF-8">
    <title>社保基金收支总览</title>
<!--    <link rel="stylesheet" href="./css/sbjj.css"/>-->
<!--    <link rel="stylesheet" href="/third/layer/layui/css/layui.css">-->
    <!--    jquery组件-->
    <script type="text/javascript" src="https://static.landi.com/common/js/jquery/2.1.4/jquery.min.js"></script>
    <!--    echarts图表组件-->
<!--    <script src="../js/echarts.js"></script>-->
    <!-- 自适应插件 -->
<!--    <script src="../js/flexible.js"></script>-->
    <!-- 时间选择插件 -->
<!--    <script src="./js/sbjj.js"></script>-->
<!--    <script src="../json/cityDate/china-main-city-map.js"></script>-->
<!--    <script src="../js/color.js"></script>-->
<!--    <script src="./js/map.js"></script>-->
<!--    <script src="/third/layer/layui/layui.all.js"></script>-->
</head>

<body>
<script src="jquery.date.js"></script>
<div class="content">
    <header>
        <h1>2022年湖北省社保基金收支总览</h1>
    </header>
    <div class="mainbox">
        <div class="panelSon-one column" id="leftPart">
            <div class="panel topPart1" id="leftPart-top">
                <table border="1" cellspacing="0" align="center" class="leftTable">
                    <tr>
                        <th class="th-cls">收入合计</th>
                        <td class="td-cls"><span class="srhj number"></span>亿元</td>
                        <td class="zzl-cls" rowspan="2"><span class="sj">增长:</span><span class="srzz"></span>%</td>
                    </tr>
                    <tr>
                        <th class="th-cls">上年同期</th>
                        <td class="td-cls"><span class="sntq_srhj number"></span>亿元</td>
                    </tr>
                </table>
                <div class="leftGauge">
                    <div class="gauge1"></div>
                    <div class="gauge2"></div>
                </div>

            </div>
            <div class="panel downPart1" id="leftPart-down">
            </div>
        </div>

        <div class="panelSon-two column" id="centerPart">
            <div class="panel topPart2" id="center-top">
                <table border="1" cellspacing="0" align="center" class="centerTable">
                    <tr>
                        <td class="zzl-cls" colspan="2">
                            <span id="test1" type="text"
                                  data-options="{'type':'YYYY-MM','beginYear':2015,'endYear':2088}"
                                  style="width:166px;height:19px;">12345</span>
                            <span id="startDate" class="sj"
                                  style="width:1rem;height:0.1rem;text-decoration: underline;text-decoration-color: rgba(255,255,255,0.7)"></span>
                            <span class="sj">-</span>
                            <span id="endDate" class="sj"
                                  style="width:1rem;height:0.1rem;text-decoration: underline;text-decoration-color: rgba(255,255,255,0.7)"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tab-lable">期初余额：<span class="qcye number"></span>亿元</td>
                        <td class="tab-lable">期末滚存结余：<span class="qmgcjy number"></span>亿元</td>
                    </tr>
                    <tr>
                        <td class="tab-lable">收入合计：<span class="srhj number"></span>亿元</td>
                        <td class="tab-lable">支出合计：<span class="zchj number"></span>亿元</td>
                    </tr>
                </table>
            </div>
            <div class="panel centerPart2">
                <div id="center-center"></div>
                <div class="back">
                    <img title="返回" src="../images/back_button.png" alt=""/>
                </div>
            </div>
            <div class="panel downPart2" id="center-down"></div>
        </div>

        <div class="panelSon-three column" id="rightPart">
            <div class="panel topPart1" id="rightPart-top">
                <table border="1" cellspacing="0" align="center" class="leftTable">
                    <tr>
                        <th class="th-cls">支出合计</th>
                        <td class="td-cls"><span class="zchj number"></span>亿元</td>
                        <td class="zzl-cls" rowspan="2"><span class="sj">增长:</span><span class="zczz"></span>%</td>
                    </tr>
                    <tr>
                        <th class="th-cls">上年同期</th>
                        <td class="td-cls"><span class="sntq_zchj number"></span>亿元</td>
                    </tr>
                </table>
                <div class="rightGauge">
                    <div class="gauge3"></div>
                </div>
            </div>
            <div class="panel downPart1" id="rightPart-down"></div>
        </div>
    </div>
</div>
</body>
<script>
/*    $('#startDate').text(new Date().getFullYear() + "年" + "01月");
    $('#endDate').text(new Date().getFullYear() + "年" + month + "月");
    $('#startDate').attr("data-options", "{'type':'YYYY-MM','beginYear':2020,'endYear':" + (new Date().getFullYear() - 10) + "}")
    $('#endDate').attr("data-options", "{'type':'YYYY-MM','beginYear':2020,'endYear':" + (new Date().getFullYear() - 10) + "}")
    $.date('#startDate');
    $.date('#endDate');*/
    $.date('#test1');

    // 得到要观察的元素
    var elementToObserve = document.getElementById("test1");

    console.log(elementToObserve)
    // 创建一个叫 `observer` 的新 `MutationObserver` 实例，
    // 并将回调函数传给它
    var observer = new MutationObserver(function() {
        console.log('触发');
    });

    // 在 MutationObserver 实例上调用 `observe` 方法，
    // 并将要观察的元素与选项传给此方法
    observer.observe(elementToObserve, {childList: true});
</script>
</html>
